<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="search-icon">🔍</text>
        <input 
          v-model="searchKeyword" 
          placeholder="搜索场地..." 
          @input="onSearch"
          class="search-field"
        />
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="filter-item" @click="showPriceFilter">
        <text class="filter-text">价格</text>
        <text class="filter-arrow">▼</text>
      </view>
      <view class="filter-item" @click="showTypeFilter">
        <text class="filter-text">类型</text>
        <text class="filter-arrow">▼</text>
      </view>
      <view class="filter-item" @click="showStatusFilter">
        <text class="filter-text">状态</text>
        <text class="filter-arrow">▼</text>
      </view>
      <view class="filter-item" @click="sortByPrice">
        <text class="filter-text">排序</text>
        <text class="filter-arrow">▼</text>
      </view>
    </view>

    <!-- 场地列表 -->
    <view class="court-container">
      <view 
        class="court-item" 
        v-for="(court, index) in filteredCourtList" 
        :key="court.id"
        @click="goToDetail(court)"
      >
        <image :src="court.image" class="court-image" mode="aspectFill" />
        <view class="court-info">
          <view class="court-header">
            <text class="court-name">{{ court.name }}</text>
            <view class="court-status" :class="court.status === 1 ? 'available' : 'booked'">
              {{ court.status === 1 ? '可预订' : '已预订' }}
            </view>
          </view>
          <text class="court-desc">{{ court.description }}</text>
          <view class="court-features">
            <text class="feature-item" v-if="court.type">{{ court.type }}</text>
            <text class="feature-item" v-if="court.floor">楼层: {{ court.floor }}</text>
            <text class="feature-item" v-if="court.size">{{ court.size }}</text>
          </view>
          <view class="court-footer">
            <view class="court-price">
              <text class="price-symbol">¥</text>
              <text class="price-value">{{ court.price }}</text>
              <text class="price-unit">/小时</text>
            </view>
            <view class="court-actions">
              <view class="action-btn" @click.stop="toggleFavorite(court)">
                <text class="action-icon" :class="{ active: court.isFavorite }">
                  {{ court.isFavorite ? '❤️' : '🤍' }}
                </text>
              </view>
              <view class="action-btn primary" @click.stop="quickBook(court)">
                <text class="action-text">立即预订</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore">
      <text class="load-text" @click="loadMore">加载更多</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="filteredCourtList.length === 0">
      <text class="empty-icon">🏸</text>
      <text class="empty-text">暂无相关场地</text>
    </view>

    <!-- 价格筛选弹窗 -->
    <uni-popup ref="pricePopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">价格筛选</text>
          <text class="popup-close" @click="closePriceFilter">✕</text>
        </view>
        <view class="price-range">
          <slider 
            :value="priceRange[0]" 
            :min="0" 
            :max="200" 
            @change="onMinPriceChange"
            class="price-slider"
          />
          <slider 
            :value="priceRange[1]" 
            :min="0" 
            :max="200" 
            @change="onMaxPriceChange"
            class="price-slider"
          />
          <view class="price-display">
            <text>¥{{ priceRange[0] }} - ¥{{ priceRange[1] }}</text>
          </view>
        </view>
        <view class="popup-actions">
          <view class="popup-btn" @click="resetPriceFilter">重置</view>
          <view class="popup-btn primary" @click="applyPriceFilter">确定</view>
        </view>
      </view>
    </uni-popup>

    <!-- 类型筛选弹窗 -->
    <uni-popup ref="typePopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">类型筛选</text>
          <text class="popup-close" @click="closeTypeFilter">✕</text>
        </view>
        <view class="type-options">
          <view 
            class="type-option" 
            :class="{ active: selectedTypes.includes(type.value) }"
            v-for="type in courtTypes" 
            :key="type.value"
            @click="toggleType(type.value)"
          >
            <text class="type-text">{{ type.label }}</text>
          </view>
        </view>
        <view class="popup-actions">
          <view class="popup-btn" @click="resetTypeFilter">重置</view>
          <view class="popup-btn primary" @click="applyTypeFilter">确定</view>
        </view>
      </view>
    </uni-popup>

    <!-- 状态筛选弹窗 -->
    <uni-popup ref="statusPopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">状态筛选</text>
          <text class="popup-close" @click="closeStatusFilter">✕</text>
        </view>
        <view class="status-options">
          <view 
            class="status-option" 
            :class="{ active: selectedStatus === status.value }"
            v-for="status in statusOptions" 
            :key="status.value"
            @click="selectStatus(status.value)"
          >
            <text class="status-text">{{ status.label }}</text>
          </view>
        </view>
        <view class="popup-actions">
          <view class="popup-btn" @click="resetStatusFilter">重置</view>
          <view class="popup-btn primary" @click="applyStatusFilter">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getCourtList } from '../../api/court.js'

export default {
  data() {
    return {
      searchKeyword: '',
      courtList: [],
      hasMore: false,
      priceRange: [0, 200],
      selectedTypes: [],
      selectedStatus: 'all',
      courtTypes: [
        { label: '标准场地', value: 'standard' },
        { label: 'VIP场地', value: 'vip' },
        { label: '训练场地', value: 'training' },
        { label: '比赛场地', value: 'competition' }
      ],
      statusOptions: [
        { label: '全部', value: 'all' },
        { label: '可预订', value: 'available' },
        { label: '已预订', value: 'booked' }
      ]
    }
  },
  computed: {
    filteredCourtList() {
      let filtered = this.courtList
      
      // 按关键词搜索
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.toLowerCase()
        filtered = filtered.filter(court => 
          court.name.toLowerCase().includes(keyword) ||
          court.description.toLowerCase().includes(keyword)
        )
      }
      
      // 按价格筛选
      filtered = filtered.filter(court => 
        court.price >= this.priceRange[0] && court.price <= this.priceRange[1]
      )
      
      // 按类型筛选
      if (this.selectedTypes.length > 0) {
        filtered = filtered.filter(court => 
          this.selectedTypes.includes(court.type)
        )
      }
      
      // 按状态筛选
      if (this.selectedStatus !== 'all') {
        const statusValue = this.selectedStatus === 'available' ? 1 : 0
        filtered = filtered.filter(court => court.status === statusValue)
      }
      
      return filtered
    }
  },
  onLoad() {
    this.loadCourtList()
  },
  onPullDownRefresh() {
    this.loadCourtList()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  methods: {
    async loadCourtList() {
      try {
        uni.showLoading({ title: '加载中...' })
        const result = await getCourtList()
        if (result.code === 200) {
          this.courtList = result.data || []
        } else {
          uni.showToast({
            title: result.message || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载场地列表失败:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    onSearch() {
      // 搜索逻辑已在computed中处理
    },
    
    showPriceFilter() {
      this.$refs.pricePopup.open()
    },
    
    showTypeFilter() {
      this.$refs.typePopup.open()
    },
    
    showStatusFilter() {
      this.$refs.statusPopup.open()
    },
    
    closePriceFilter() {
      this.$refs.pricePopup.close()
    },
    
    closeTypeFilter() {
      this.$refs.typePopup.close()
    },
    
    closeStatusFilter() {
      this.$refs.statusPopup.close()
    },
    
    onMinPriceChange(e) {
      this.priceRange[0] = e.detail.value
    },
    
    onMaxPriceChange(e) {
      this.priceRange[1] = e.detail.value
    },
    
    toggleType(type) {
      const index = this.selectedTypes.indexOf(type)
      if (index > -1) {
        this.selectedTypes.splice(index, 1)
      } else {
        this.selectedTypes.push(type)
      }
    },
    
    selectStatus(status) {
      this.selectedStatus = status
    },
    
    resetPriceFilter() {
      this.priceRange = [0, 200]
    },
    
    resetTypeFilter() {
      this.selectedTypes = []
    },
    
    resetStatusFilter() {
      this.selectedStatus = 'all'
    },
    
    applyPriceFilter() {
      this.closePriceFilter()
    },
    
    applyTypeFilter() {
      this.closeTypeFilter()
    },
    
    applyStatusFilter() {
      this.closeStatusFilter()
    },
    
    sortByPrice() {
      this.courtList.sort((a, b) => a.price - b.price)
    },
    
    toggleFavorite(court) {
      court.isFavorite = !court.isFavorite
      uni.showToast({
        title: court.isFavorite ? '已收藏' : '已取消收藏',
        icon: 'success'
      })
    },
    
    quickBook(court) {
      uni.navigateTo({
        url: `/pages/booking/booking?courtId=${court.id}`
      })
    },
    
    goToDetail(court) {
      uni.navigateTo({
        url: `/pages/court/detail?id=${court.id}`
      })
    },
    
    loadMore() {
      // 这里可以加载更多数据
      uni.showToast({
        title: '暂无更多数据',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 搜索栏 */
.search-bar {
  background: white;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.search-input {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 20px;
  padding: 10px 15px;
}

.search-icon {
  font-size: 16px;
  margin-right: 10px;
  color: #999;
}

.search-field {
  flex: 1;
  font-size: 14px;
  color: #333;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.filter-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  gap: 5px;
}

.filter-text {
  font-size: 14px;
  color: #333;
}

.filter-arrow {
  font-size: 12px;
  color: #999;
}

/* 场地列表 */
.court-container {
  padding: 15px;
}

.court-item {
  display: flex;
  background: white;
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.court-image {
  width: 120px;
  height: 90px;
  border-radius: 8px;
  margin-right: 15px;
}

.court-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.court-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.court-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 10px;
}

.court-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.court-status.available {
  background: #e8f5e8;
  color: #52c41a;
}

.court-status.booked {
  background: #fff2e8;
  color: #fa8c16;
}

.court-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 8px;
}

.court-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.feature-item {
  font-size: 12px;
  color: #07c160;
  background: #f0f9ff;
  padding: 4px 8px;
  border-radius: 4px;
}

.court-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.court-price {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 14px;
  color: #ff6b35;
}

.price-value {
  font-size: 20px;
  font-weight: bold;
  color: #ff6b35;
}

.price-unit {
  font-size: 12px;
  color: #999;
  margin-left: 2px;
}

.court-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.action-btn {
  padding: 6px 12px;
  border-radius: 6px;
  background: #f8f9fa;
  border: 1px solid #ddd;
}

.action-btn.primary {
  background: #07c160;
  color: white;
  border: none;
}

.action-icon {
  font-size: 16px;
}

.action-icon.active {
  color: #ff4757;
}

.action-text {
  font-size: 12px;
  color: white;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 20px;
}

.load-text {
  color: #07c160;
  font-size: 14px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 15px;
}

.empty-text {
  font-size: 16px;
  color: #999;
}

/* 弹窗样式 */
.popup-content {
  background: white;
  border-radius: 12px 12px 0 0;
  padding: 20px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 20px;
  color: #999;
}

.price-range {
  margin-bottom: 20px;
}

.price-slider {
  margin-bottom: 10px;
}

.price-display {
  text-align: center;
  font-size: 16px;
  color: #07c160;
  font-weight: bold;
}

.type-options, .status-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.type-option, .status-option {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #f8f9fa;
}

.type-option.active, .status-option.active {
  background: #07c160;
  color: white;
  border-color: #07c160;
}

.type-text, .status-text {
  font-size: 14px;
}

.popup-actions {
  display: flex;
  gap: 15px;
}

.popup-btn {
  flex: 1;
  padding: 12px;
  text-align: center;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  font-size: 16px;
}

.popup-btn.primary {
  background: #07c160;
  color: white;
  border: none;
}
</style>
